import React from 'react'
import { clsx } from 'clsx'
import { SearchIcon, BookOpenIcon, PenToolIcon, ImageIcon } from './Icon'

export interface FunctionButtonProps {
  icon: React.ReactNode
  label: string
  description?: string
  onClick?: () => void
  active?: boolean
  disabled?: boolean
  className?: string
}

export const FunctionButton: React.FC<FunctionButtonProps> = ({
  icon,
  label,
  description,
  onClick,
  active = false,
  disabled = false,
  className = ''
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={clsx(
        'group flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200',
        'text-sm font-medium transform-gpu',
        'hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-1',
        'hover:scale-[1.02] active:scale-[0.98]',
        active 
          ? 'bg-accent-100 text-accent-700 shadow-sm border border-accent-200' 
          : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 border border-transparent',
        disabled && 'opacity-50 cursor-not-allowed hover:scale-100 active:scale-100',
        className
      )}
      title={description}
    >
      <span className={clsx(
        'flex-shrink-0 transition-transform duration-200',
        'group-hover:scale-110 group-active:scale-95',
        active ? 'text-accent-600' : 'text-neutral-500 group-hover:text-neutral-700'
      )}>
        {icon}
      </span>
      <span className="hidden sm:inline-block lg:hidden xl:inline-block">{label}</span>
    </button>
  )
}

// 预设功能按钮
export const AISearchButton: React.FC<Omit<FunctionButtonProps, 'icon' | 'label'>> = (props) => (
  <FunctionButton
    icon={<SearchIcon size="sm" />}
    label="AI搜索"
    description="实时搜索最新信息"
    {...props}
  />
)

export const AIReadButton: React.FC<Omit<FunctionButtonProps, 'icon' | 'label'>> = (props) => (
  <FunctionButton
    icon={<BookOpenIcon size="sm" />}
    label="AI阅读"
    description="智能解读文档内容"
    {...props}
  />
)

export const AIWriteButton: React.FC<Omit<FunctionButtonProps, 'icon' | 'label'>> = (props) => (
  <FunctionButton
    icon={<PenToolIcon size="sm" />}
    label="AI写作"
    description="创作优质内容文案"
    {...props}
  />
)

export const AIImageButton: React.FC<Omit<FunctionButtonProps, 'icon' | 'label'>> = (props) => (
  <FunctionButton
    icon={<ImageIcon size="sm" />}
    label="AI图画"
    description="创意图像生成设计"
    {...props}
  />
)

